<template>
  <div class="system">
    <img :src="system.src">
    <div class="system-main">
      <h2>{{system.title}}</h2>
      <p>{{system.desc}}</p>
      <div class="btn">
        <a :href="system.url" target="_blank">商用演示</a>
      </div>
    </div>
  </div>
</template>
<script>
  export default{
    data () {
      return {}
    },
    props: {
      system: {
        type: Object
      }
    },
    computed: {},
    methods: {},
    components: {}
  }
</script>
<style scoped>
  .system{background-color: #f8f8f8; border-radius: 100px;  position: relative; height: 200px; float: left; margin: 25px;}
  img{position: absolute; left: 0}
  .system-main{margin-left: 200px; padding: 15px 30px}
  h2{font-weight: normal; font-size: 22px}
  p{color: #999; font-size: 12px; height: 50px;}
  .btn a{border: 1px solid #999; border-radius: 20px; padding: 5px 20px; font-size: 14px;  display: inline-block; margin-right: 7px;}
  .btn a:hover{color: #fff; background-color: #169aea; border-color: #169aea}
</style>
